.button
  position: relative
  display: inline-block
  margin: 0
  padding: 5px 10px
  overflow: visible
  border: none
  border-radius: 4px
  background-clip: padding-box
  background-color: #696867
  color: $white
  font-family: 'Source Sans Pro'
  font-size: $font-size-s
  font-weight: normal
  text-decoration: none
  text-align: center
  white-space: nowrap
  cursor: pointer
  outline: none
  &:hover,
  &:active
    color: $white
    background-color: lighten(#696867, 10)
  &:focus
    color: $white
    background-color: #696867

.button--green
  background-color: $turf-green
  &:focus,
  &:active,
  &:hover
    background-color: rgba($turf-green, 0.8)

.button--teal
  @extend .button
  background-color: $teal-dark
  &:focus,
  &:active,
  &:hover
    background-color: $teal-light

.list-language
  @extend %ul-styles
  -moz-columns: 2
  -webkit-columns: 2
  columns: 2
  text-transform: uppercase

  small
    color: #888

.list--blank
  @extend %ul-styles
  text-transform: uppercase

.list--links
  @extend %ul-styles
  +linkStyle

.toc
  margin: 3em 0
  ul
    @extend %ul-styles
  li:before
    content: ""
    width: 5px
    height: 5px
    display: inline-block
    background-color: $teal-light
    border-radius: 50%
    vertical-align: middle
    margin-right: 0.4em
  a
    color: $teal-light
    &:hover
      text-decoration: underline

.toc-list
  @extend %ul-styles

img.app
  @media #{$medium-up}
    float: left
    margin-right: 2em
    max-width: 190px

.alpha
  font-style: normal
  background: $cream-light
  color: $quartz-red
  padding: 0 1em
  border: 1px solid $quartz-red
  p
    color: $brick-red
    &:before
      content: ""
      display: block
      float: left
      width: 1.7em
      height: 1.7em
      border-radius: 50%
      margin-right: 0.8em
      vertical-align: middle
      background:
        image: url(/images/ui/icon-flag.svg)
        color: $brick-red
        repeat: no-repeat
        size: 70%
        position: 72% center

.beta
  font-style: normal
  background: $haze-yellow
  color: $dozer-yellow
  padding: 0 1em
  border: 1px solid $canary-yellow
  p
    color: $dozer-yellow
    &:before
      content: ""
      display: block
      float: left
      width: 1.7em
      height: 1.7em
      border-radius: 50%
      margin-right: 0.8em
      vertical-align: middle
      background:
        image: url(/images/ui/icon-flag.svg)
        color: $dozer-yellow
        repeat: no-repeat
        size: 70%
        position: 72% center

.column-2
  column-count: 2

.column-3
  column-count: 3

.button-pen
  display: inline-block
  padding: .3em .5em
  border: solid 1px $cement-grey
  color: $cement-grey
  border-radius: 2px
  text-decoration: none
  &:before
    content: ""
    display: inline-block
    width: 1em
    height: 1.2em
    margin-right: .3em
    vertical-align: middle
    background-repeat: no-repeat
    background-size: 100%
    background-image: url()
  &:active,
  &:hover,
  &:focus
    border-color: $oxide-blue
    color: $oxide-blue
    &:before
      background-image: url()

.ip-address-ranges
  tbody td:nth-child(2)
    min-width: 18em
